<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>技术Fan</title>
        <link th:href="@{/img/Fan_logo_alpha.png}" rel="icon" type="image/x-icon">

        <!-- Bootstrap Icons-->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
        <!-- Google fonts-->
        <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" />
        <!-- SimpleLightbox plugin CSS-->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css" rel="stylesheet" />
        <!-- Core theme CSS (包括 Bootstrap)-->
        <link th:href="@{/css/styles.css}" rel="stylesheet" />
        <link th:href="@{/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css">
        <link th:href="@{/css/web_tips.css}" rel="stylesheet" type="text/css">
        <link th:href="@{/css/common-css/bootstrap.css}" rel="stylesheet">
<!--        <link th:href="@{/css/common-css/ionicons.css}" rel="stylesheet">-->
        <link th:href="@{/css/common-css/layerslider.css}" rel="stylesheet">
        <link th:href="@{/css/homepage/css/styles.css}" rel="stylesheet">
<!--        橙色配色已经全部用蓝色代替，即 # FFA D4D-># 46d 1fd-->
        <link th:href="@{/css/homepage/css/responsive.css}" rel="stylesheet">
    </head>
    <body id="page-top">
        <!-- Navigation-->
        <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">

            <div class="container px-4 px-lg-5" style="color: white;">
                <a class="navbar-brand" href="#page-top">技术Fan</a>
                <a th:if="${user}!=null" class="navbar-brand" href="submission/index">我要投稿</a>
                <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ms-auto my-2 my-lg-0">
<!--                        <li class="nav-item"><a class="nav-link" target="_blank" href="/admin/listUsers">临时按钮：前往我的主页</a></li>-->
<!--                        <li class="nav-item"><a style="line-height: 32px;" class="nav-link" target="_blank" href="/userPage/index">临时按钮：前往我的主页</a></li>-->
<!--                        <li class="nav-item"><a style="line-height: 32px;" class="nav-link" target="_blank" href="/userPage/myArticle">前往我的投稿</a></li>-->
                        <li th:if="${user!=null and user?.getDept().getId()!=6}" class="nav-item">
                            <a style="line-height: 32px;" class="nav-link" target="_blank" href="/">管理员操作：前往管理后台</a>
                        </li>
<!--                        <li class="nav-item"><a class="nav-link" target="_blank" href="/submission/index"></a></li>-->
                        <li class="nav-item"><a style="line-height: 32px;" class="nav-link" href="#about">关于</a></li>
                        <li th:style="${user}==null?'line-height: 32px;':'display: none;'" class="nav-item"><a class="nav-link" href="/login">登录</a></li>
                        <li th:style="${user}==null?'line-height: 32px;':'display: none;'" class="nav-item"><a class="nav-link" href="/register">注册</a></li>
                        <li th:if="${user}!=null" class="nav-item">
                            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span th:text="${user.nickname}" class="mr-2 d-none d-lg-inline text-gray-600 small">用户名</span>
                                <img style="width: auto;" class="img-profile rounded-circle ml-2" width="32" height="32"
                                     th:src="@{'/system/user/picture?p='+${user.picture}}">
                            </a>
                            <!-- Dropdown - User Information -->
                            <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
                                 aria-labelledby="userDropdown">
                                <a class="dropdown-item" href="/userPage/myPage" target="_blank">
                                    <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                                    我的首页
                                </a>
                                <a class="dropdown-item"  href="/userPage/myArticle" target="_blank">
                                    <i class="fas fa-book fa-sm fa-fw mr-2 text-gray-400"></i>
                                    我的帖子
                                </a>
                                <div class="dropdown-divider"></div>
                                <a  href="/logout" class="dropdown-item">
                                    <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                    退出登录
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!--    网站通知-->
        <div class="tips_wrapper" style="position: absolute;right: 50px;z-index: 999;"></div>
        <div class="background w-100" style="position: absolute;top: 0;height: 70px; background-color: rgb(255,173,77)"></div>

        <!-- main-slider -->
        <div class="w-75 m-auto">
            <div class="main-slider">
                <!--轮播图部分-->
                <div id="slider">
                    <div th:each="carousel:${carouselList}" class="ls-slide" data-ls="bgsize:cover; bgposition:50% 50%; duration:4000; transition2d:104; kenburnsscale:1.00;">
                        <img th:src="@{'/system/article/picture?p='+${carousel.getMainPicture()}}" class="ls-bg" alt="" />
                        <div class="slider-content ls-l" style="top:60%; left:30%;" data-ls="offsetyin:100%; offsetxout:-50%; durationin:800; delayin:100; durationout:400; parallaxlevel:0;">
                            <a th:if="${carousel.getArticleClass()==1}" class="btn mb-2" href="#">前后台技术</a>
                            <a th:if="${carousel.getArticleClass()==2}" class="btn mb-2" href="#">计算机软件</a>
                            <a th:if="${carousel.getArticleClass()==3}" class="btn mb-2" href="#">计算机硬件</a>
                            <a th:if="${carousel.getArticleClass()==4}" class="btn mb-2" href="#">其他</a>
                            <a th:if="${carousel.getArticleClass()==null} or ${carousel.getArticleClass()==5}" class="btn mb-2" href="#">未分类</a>
                            <a class="title h3" target="_blank" th:href="'/system/article/read/'+${carousel.getId()}">
                                <b th:utext="${carousel.getTitle()}">查询最新一篇文章</b>
                            </a>
                            <div style="height: 150px;width: 300px; overflow: hidden;color: white;opacity: 90%;" class="text-white">
                                <div style="color: white;opacity: 90%;" th:utext="${carousel.getContent()}">插入文章前几十个字</div>
                            </div>

                        </div>
                    </div><!-- ls-slide -->

                    <!--                <div class="ls-slide" data-ls="bgsize:cover; bgposition:50% 50%; duration:4000; transition2d:104; kenburnsscale:1.00;">-->
                    <!--                    <img src="images/slider-2-1600x800.jpg" class="ls-bg" alt="" />-->

                    <!--                    <div class="slider-content ls-l" style="top:60%; left:30%;" data-ls="offsetyin:100%; offsetxout:-50%; durationin:800; delayin:100; durationout:400; parallaxlevel:0;">-->
                    <!--                        <a class="btn" href="#">电脑软件技术</a>-->
                    <!--                        <h3 class="title"><b>查询最新一篇文章</b></h3>-->
                    <!--                        <h6>插入文章前几十个字</h6>-->
                    <!--                    </div>-->

                    <!--                </div>&lt;!&ndash; ls-slide &ndash;&gt;-->

                </div><!-- slider -->
            </div>
        </div>

        <section class="section blog-area">
            <div class="container">
                <div class="row">

                    <div class="col-lg-8 col-md-12">
                        <div class="blog-posts">
                            <div class="card">
                            <h3 class="title mb-3 card-title btn">前后台技术</h3>
                                <p th:if="${articleList_1}==null">抱歉，该分类下暂无文章</p>
                            <div class="single-post card-body" th:each="article_c1:${articleList_1}">
                                <div class="image-wrapper text-center" style="height: 225px;"><img class="h-100 w-auto" th:src="@{'/system/article/picture?p='+${article_c1.getMainPicture()}}" alt="帖子主图"></div>
                                <div class="icons">
                                    <div class="left-area">
                                        <a class="btn caegory-btn" target="_blank" th:href="'/system/article/read/'+${article_c1.getId()}">
                                            <b th:utext="${article_c1.getTitle()}">帖子标题</b>
                                        </a>
                                    </div>
                                    <ul class="right-area social-icons">
                                        <li><button th:value="${article_c1.getId()}" onclick="hit_like(this);"><i class="mr-2 fa fa-thumbs-up"></i>
                                            <button value="0" th:class="'article'+${article_c1.getId()}+'_likes'" th:text="${article_c1.getLikeNumber()}">0</button></button>
                                        </li>
                                        <li><a><i class="fa fa-comment-alt"></i>
                                            <span th:text="${article_c1.getCommentNumber()}"></span>
                                        </a></li>
                                    </ul>
                                </div>
                                <p th:utext="'<em>'+${article_c1.getCreateDate()}+'</em>'" class="right-area date"><em>上传日期</em></p>
                                <h3 class="title"><a target="_blank" th:href="'/system/article/read/'+${article_c1.getId()}"><b class="light-color" th:utext="${article_c1.getTitle()}">帖子标题</b></a></h3>
                                <div style="height: 125px;overflow: hidden;">
                                    <p th:utext="${article_c1.getContent()}" >文章内容</p>
                                </div>
                                <a class="btn read-more-btn" target="_blank" th:href="'/system/article/read/'+${article_c1.getId()}"><b>阅读更多</b></a>
                            </div><!-- single-post -->
                            </div>
                            <hr/>
                            <div class="card">
                            <h3 class="title mb-3 card-title btn">计算机软件</h3>
                                <p th:if="${articleList_2}==null">抱歉，该分类下暂无文章</p>
                            <div class="single-post" th:each="article_c1:${articleList_2}">
                                <div class="image-wrapper text-center" style="height: 225px;"><img class="h-100 w-auto" th:src="@{'/system/article/picture?p='+${article_c1.getMainPicture()}}" alt="帖子主图"></div>
                                <div class="icons">
                                    <div class="left-area">
                                        <a class="btn caegory-btn" target="_blank" th:href="'/system/article/read/'+${article_c1.getId()}">
                                            <b th:utext="${article_c1.getTitle()}">帖子标题</b>
                                        </a>
                                    </div>
                                    <ul class="right-area social-icons">
                                        <li><button th:value="${article_c1.getId()}" onclick="hit_like(this);"><i class="mr-2 fa fa-thumbs-up"></i>
                                            <button value="0" th:class="'article'+${article_c1.getId()}+'_likes'" th:text="${article_c1.getLikeNumber()}">0</button></button>
                                        </li>
                                        <li><a><i class="fa fa-comment-alt"></i>
                                            <span th:text="${article_c1.getCommentNumber()}"></span>
                                        </a></li>
                                    </ul>
                                </div>
                                <p th:utext="'<em>'+${article_c1.getCreateDate()}+'</em>'" class="right-area date"><em>上传日期</em></p>
                                <h3 class="title"><a target="_blank" th:href="'/system/article/read/'+${article_c1.getId()}"><b class="light-color" th:utext="${article_c1.getTitle()}">帖子标题</b></a></h3>
                                <div style="height: 125px;overflow: hidden;">
                                    <p th:utext="${article_c1.getContent()}" >文章内容</p>
                                </div>
                                <a class="btn read-more-btn" target="_blank" th:href="'/system/article/read/'+${article_c1.getId()}"><b>阅读更多</b></a>
                            </div><!-- single-post -->
                            </div>
                            <hr/>
                            <div class="card">
                            <h3 class="title mb-3 card-title btn">计算机硬件</h3>
                                <p th:if="${articleList_3}==null">抱歉，该分类下暂无文章</p>
                            <div class="single-post" th:each="article_c1:${articleList_3}">
                                <div class="image-wrapper text-center" style="height: 225px;"><img class="h-100 w-auto" th:src="@{'/system/article/picture?p='+${article_c1.getMainPicture()}}" alt="帖子主图"></div>
                                <div class="icons">
                                    <div class="left-area">
                                        <a class="btn caegory-btn" target="_blank" th:href="'/system/article/read/'+${article_c1.getId()}">
                                            <b th:utext="${article_c1.getTitle()}">帖子标题</b>
                                        </a>
                                    </div>
                                    <ul class="right-area social-icons">
                                        <li><button th:value="${article_c1.getId()}" onclick="hit_like(this);"><i class="mr-2 fa fa-thumbs-up"></i>
                                            <button value="0" th:class="'article'+${article_c1.getId()}+'_likes'" th:text="${article_c1.getLikeNumber()}">0</button></button>
                                        </li>
                                        <li><a><i class="fa fa-comment-alt"></i>
                                            <span th:text="${article_c1.getCommentNumber()}"></span>
                                        </a></li>
                                    </ul>
                                </div>
                                <p th:utext="'<em>'+${article_c1.getCreateDate()}+'</em>'" class="right-area date"><em>上传日期</em></p>
                                <h3 class="title"><a target="_blank" th:href="'/system/article/read/'+${article_c1.getId()}"><b class="light-color" th:utext="${article_c1.getTitle()}">帖子标题</b></a></h3>
                                <div style="height: 125px;overflow: hidden;">
                                    <p th:utext="${article_c1.getContent()}" >文章内容</p>
                                </div>
                                <a class="btn read-more-btn" target="_blank" th:href="'/system/article/read/'+${article_c1.getId()}"><b>阅读更多</b></a>
                            </div><!-- single-post -->
                            </div>
                            <hr/>
                            <div class="row">
                                <h3 class="title mb-3">其他分类</h3>
                                <p th:if="${articleList_4}==null">抱歉，该分类下暂无文章</p>
                                <div  th:each="articles:${articleList_4}" class="col-lg-6 col-md-12">
                                    <div class="single-post">
                                        <div class="image-wrapper" style="height: 350px;text-align: center;">
                                            <img class="h-100 w-auto" th:src="@{'/system/article/picture?p='+${articles.getMainPicture()}}" alt="帖子主图">
                                        </div>

                                        <div class="mt-0 icons">
                                            <div class="left-area w-100">
                                                <h4 class="title">
                                                    <a target="_blank" th:href="'/system/article/read/'+${articles.getId()}">
                                                        <b th:utext="${articles.getTitle()}" class="light-color">Title</b>
                                                    </a>
                                                </h4>
                                            </div>
                                            <ul class="right-area social-icons">
<!--                                                <li><a href="#"><i class="ion-android-share-alt"></i>Share</a></li>-->
                                                <li><button th:value="${articles.getId()}" onclick="hit_like(this);"><i class="mr-2 fa fa-thumbs-up"></i>
                                                    <button value="0" th:class="'article'+${articles.getId()}+'_likes'" th:text="${articles.getLikeNumber()}">0</button></button>
                                                </li>
                                                <li><a><i class="fa fa-comment-alt"></i>
                                                    <span th:text="${articles.getCommentNumber()}"></span>
                                                </a></li>
                                            </ul>
                                        </div>
                                        <h6 th:utext="'<em>'+${articles.getCreateDate()}+'</em>'" class="right-area date"><em>上传日期</em></h6>
                                        <div class="w-100 mt-5" style="height: 100px;overflow: hidden;">
                                            <p th:utext="${articles.getContent()}">文章内容</p>
                                        </div>
                                        <a target="_blank" class="btn read-more-btn" th:href="'/system/article/read/'+${articles.getId()}"><b>阅读更多</b></a>
                                    </div><!-- single-post -->
                                </div><!-- col-sm-6 -->

<!--                                <div class="col-lg-6 col-md-12">-->
<!--                                    <div class="single-post">-->
<!--                                        <div class="image-wrapper"><img src="images/blog-4-500x400.jpg" alt="Blog Image"></div>-->

<!--                                        <div class="icons">-->
<!--                                            <div class="left-area">-->
<!--                                                <a class="btn caegory-btn" href="#"><b>TRAVEL</b></a>-->
<!--                                            </div>-->
<!--                                            <ul class="right-area social-icons">-->
<!--                                                <li><a href="#"><i class="ion-android-share-alt"></i>Share</a></li>-->
<!--                                                <li><a href="#"><i class="ion-android-favorite-outline"></i>03</a></li>-->
<!--                                                <li><a href="#"><i class="ion-android-textsms"></i>06</a></li>-->
<!--                                            </ul>-->
<!--                                        </div>-->
<!--                                        <h6 class="date"><em>Monday, October 13, 2017</em></h6>-->
<!--                                        <h3 class="title"><a href="#"><b class="light-color">One more night in the local clubs</b></a></h3>-->
<!--                                        <p>Sed ut perspiciatis unde omnis iste natus error sit doloremque-->
<!--                                            laudantium, totam rem aperiam, eaque ipsa quae ab illo veritatis et quasi-->
<!--                                            dolore magnam aliquam quaerat voluptatem.</p>-->
<!--                                        <a class="btn read-more-btn" href="#"><b>READ MORE</b></a>-->
<!--                                    </div>&lt;!&ndash; single-post &ndash;&gt;-->
<!--                                </div>&lt;!&ndash; col-sm-6 &ndash;&gt;-->

<!--                                <div class="col-lg-6 col-md-12">-->
<!--                                    <div class="single-post">-->
<!--                                        <div class="image-wrapper"><img src="images/blog-5-500x400.jpg" alt="Blog Image"></div>-->

<!--                                        <div class="icons">-->
<!--                                            <div class="left-area">-->
<!--                                                <a class="btn caegory-btn" href="#"><b>TRAVEL</b></a>-->
<!--                                            </div>-->
<!--                                            <ul class="right-area social-icons">-->
<!--                                                <li><a href="#"><i class="ion-android-share-alt"></i>Share</a></li>-->
<!--                                                <li><a href="#"><i class="ion-android-favorite-outline"></i>03</a></li>-->
<!--                                                <li><a href="#"><i class="ion-android-textsms"></i>06</a></li>-->
<!--                                            </ul>-->
<!--                                        </div>-->
<!--                                        <h6 class="date"><em>Monday, October 13, 2017</em></h6>-->
<!--                                        <h3 class="title"><a href="#"><b class="light-color">A new festival in your town</b></a></h3>-->
<!--                                        <p>Sed ut perspiciatis unde omnis iste natus error sit doloremque-->
<!--                                            laudantium, totam rem aperiam, eaque ipsa quae ab illo veritatis et quasi-->
<!--                                            dolore magnam aliquam quaerat voluptatem.</p>-->
<!--                                        <a class="btn read-more-btn" href="#"><b>READ MORE</b></a>-->
<!--                                    </div>&lt;!&ndash; single-post &ndash;&gt;-->
<!--                                </div>&lt;!&ndash; col-sm-6 &ndash;&gt;-->

<!--                                <div class="col-lg-6 col-md-12">-->
<!--                                    <div class="single-post">-->
<!--                                        <div class="image-wrapper"><img src="images/blog-6-500x400.jpg" alt="Blog Image"></div>-->

<!--                                        <div class="icons">-->
<!--                                            <div class="left-area">-->
<!--                                                <a class="btn caegory-btn" href="#"><b>TRAVEL</b></a>-->
<!--                                            </div>-->
<!--                                            <ul class="right-area social-icons">-->
<!--                                                <li><a href="#"><i class="ion-android-share-alt"></i>Share</a></li>-->
<!--                                                <li><a href="#"><i class="ion-android-favorite-outline"></i>03</a></li>-->
<!--                                                <li><a href="#"><i class="ion-android-textsms"></i>06</a></li>-->
<!--                                            </ul>-->
<!--                                        </div>-->
<!--                                        <h6 class="date"><em>Monday, October 13, 2017</em></h6>-->
<!--                                        <h3 class="title"><a href="#"><b class="light-color">How to make your home modern</b></a></h3>-->
<!--                                        <p>Sed ut perspiciatis unde omnis iste natus error sit doloremque-->
<!--                                            laudantium, totam rem aperiam, eaque ipsa quae ab illo veritatis et quasi-->
<!--                                            dolore magnam aliquam quaerat voluptatem.</p>-->
<!--                                        <a class="btn read-more-btn" href="#"><b>READ MORE</b></a>-->
<!--                                    </div>&lt;!&ndash; single-post &ndash;&gt;-->
<!--                                </div>&lt;!&ndash; col-sm-6 &ndash;&gt;-->


                            </div><!-- row -->

                            <a class="btn load-more-btn" target="_blank" href="#">查看更多文章</a>

                        </div><!-- blog-posts -->
                    </div><!-- col-lg-4 -->


                    <div class="col-lg-4 col-md-12">
                        <div class="sidebar-area">


                            <div class="sidebar-section src-area">

                                <form action="post">
                                    <input class="src-input" type="text" placeholder="Search">
                                    <button class="src-btn" type="submit"><i class="ion-ios-search-strong"></i></button>
                                </form>

                            </div>


                            <div class="sidebar-section category-area">
                                <h4 class="title"><b class="light-color">分类</b></h4>

                                <a class="category" target="_blank" href="/read_articles/class/0">
                                    <img src="images/category-0-400x150.jpg" alt="Category Image">
                                    <h6 style="opacity:90%;background-color: #0d6efd;" class="name">全部分类</h6>
                                </a>

                                <a class="category" target="_blank" href="/read_articles/class/1">
                                    <img src="images/category-1-400x150.jpg" alt="Category Image">
                                    <h6 style="opacity:90%;" class="name">前后台技术</h6>
                                </a>

                                <a class="category" target="_blank" href="/read_articles/class/2">
                                    <img src="images/category-2-400x150.jpg" alt="Category Image">
                                    <h6 style="opacity:90%;" class="name">计算机软件</h6>
                                </a>

                                <a class="category" target="_blank" href="/read_articles/class/3">
                                    <img src="images/category-3-400x150.jpg" alt="Category Image">
                                    <h6 style="opacity:90%;" class="name">计算机硬件</h6>
                                </a>
                                <a class="category" target="_blank" href="/read_articles/class/4">
                                    <img src="images/category-4-400x150.jpg" alt="Category Image">
                                    <h6 style="opacity:90%;" class="name">其他</h6>
                                </a>
                            </div><!-- sidebar-section category-area -->

                            <div class="sidebar-section latest-post-area">
                                <h4 class="title"><b class="light-color">最近更新</b></h4>

                                <div class="latest-post" href="#" th:each="latestArticle:${carouselList}">
                                    <div class="l-post-image"><img th:src="@{'/system/article/picture?p='+${latestArticle.getMainPicture()}}" alt="主图"></div>
                                    <div class="post-info">
                                        <a class="btn category-btn" target="_blank" th:href="'/system/article/read/'+${latestArticle.getId()}" th:text="${latestArticle.getTitle()}">文章标题</a>
                                        <div class="w-auto" style="max-height: 150px;overflow-y: hidden;">
                                            <h5><a target="_blank" th:href="'/system/article/read/'+${latestArticle.getId()}"><b class="light-color" th:utext="${latestArticle.getContent()}">文章内容</b></a></h5>
                                        </div>

                                        <h6 class="date"><em th:text="${latestArticle.getCreateDate()}"></em></h6>
                                    </div>
                                </div>

                            </div>

<!--                            <div class="sidebar-section advertisement-area">-->
<!--                                <h4 class="title"><b class="light-color">Advertisement</b></h4>-->
<!--                                <a class="advertisement-img" href="#">-->
<!--                                    <img src="images/advertise-1-400x500.jpg" alt="Advertisement Image">-->
<!--                                    <h6 class="btn btn-2 discover-btn">DISCOVER</h6>-->
<!--                                </a>-->
<!--                            </div>&lt;!&ndash; sidebar-section advertisement-area &ndash;&gt;-->

<!--                            <div class="sidebar-section instagram-area">-->
<!--                                <h4 class="title"><b class="light-color">Instagram</b></h4>-->
<!--                                <ul class="instagram-img">-->
<!--                                    <li><a href="#"><img src="images/instragram-side-1-150x150.jpg" alt="Instagram Image"></a></li>-->
<!--                                    <li><a href="#"><img src="images/instragram-side-2-150x150.jpg" alt="Instagram Image"></a></li>-->
<!--                                    <li><a href="#"><img src="images/instragram-side-3-150x150.jpg" alt="Instagram Image"></a></li>-->
<!--                                    <div class="clearfix"></div>-->
<!--                                    <li><a href="#"><img src="images/instragram-side-4-150x150.jpg" alt="Instagram Image"></a></li>-->
<!--                                    <li><a href="#"><img src="images/instragram-side-5-150x150.jpg" alt="Instagram Image"></a></li>-->
<!--                                    <li><a href="#"><img src="images/instragram-side-6-150x150.jpg" alt="Instagram Image"></a></li>-->
<!--                                </ul>-->
<!--                            </div>&lt;!&ndash; sidebar-section instagram-area &ndash;&gt;-->

<!--                            <div class="sidebar-section tags-area">-->
<!--                                <h4 class="title"><b class="light-color">Tags</b></h4>-->
<!--                                <ul class="tags">-->
<!--                                    <li><a class="btn" href="#">design</a></li>-->
<!--                                    <li><a class="btn" href="#">fasinon</a></li>-->
<!--                                    <li><a class="btn" href="#">travel</a></li>-->
<!--                                    <li><a class="btn" href="#">music</a></li>-->
<!--                                    <li><a class="btn" href="#">video</a></li>-->
<!--                                    <li><a class="btn" href="#">photography</a></li>-->
<!--                                    <li><a class="btn" href="#">adventure</a></li>-->
<!--                                </ul>-->
<!--                            </div>&lt;!&ndash; sidebar-section tags-area &ndash;&gt;-->


                        </div><!-- about-author -->
                    </div><!-- col-lg-4 -->

                </div><!-- row -->
            </div><!-- container -->
        </section><!-- section -->



        <footer>
            <div class="container">
                <div class="row">

                    <div class="col-sm-6">
                        <div class="footer-section">
                            <p class="copyright">CTGU &copy; 2022. Made <i class="fa fa-book-open" aria-hidden="true"></i> by <a href="https://gitee.com/satelliter63/csblog" target="_blank">Group 9</a></p>
                        </div><!-- footer-section -->
                    </div><!-- col-lg-4 col-md-6 -->

                    <div class="col-sm-6">
                        <div class="footer-section">
                            <ul class="social-icons">
                                <li><a href="#"><i class="fa fa-wechat"></i></a></li>
                                <li><a href="#"><i class="fa -wechat"></i></a></li>
                            </ul>
                        </div><!-- footer-section -->
                    </div><!-- col-lg-4 col-md-6 -->

                </div><!-- row -->
            </div><!-- container -->
        </footer>
        <script th:src="@{/js/common-js/jquery-3.1.1.min.js}"></script>
        <!-- Bootstrap core JavaScript-->
<!--        <script th:src="@{/vendor/jquery/jquery.min.js}"></script>-->
        <script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!--        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.js"></script>
        <script th:src="@{/js/scripts.js}"></script>
        <!-- SCIPTS -->
        <script th:src="@{/js/common-js/tether.min.js}"></script>
        <script th:src="@{/js/common-js/bootstrap.js}"></script>
        <script th:src="@{/js/common-js/layerslider.js}"></script>
        <script th:src="@{/js/common-js/scripts.js}"></script>
        <!--关闭弹出通知-->
        <script>
            function hit_like(node){
                // alert(node);
                let article_id = $(node).val();
                // alert(article_id);
                let num_node = $('.article'+article_id+'_likes');
                if(num_node.eq(0).val()==="0"){
                    $.ajax({
                        url:"/system/like/add/"+article_id,
                        type:"get",
                        success: function (data) {
                            let msg = data["msg"];
                            let number = Number(num_node.eq(0).text());
                            if(msg === "点赞成功"){
                                $(node).addClass("text-warning").removeClass("text-gray-900");
                                num_node.html(number+1);
                            }else{
                                alert("对不起，您过去已经点赞过该篇文章了");
                                $(node).addClass("text-warning").removeClass("text-gray-900");
                            }
                            num_node.val("1");
                        }
                    });

                }
                else{
                    $.ajax({
                        url:"/system/like/remove/"+article_id,
                        type:"get",
                        success: function (data) {
                            let number = Number(num_node.eq(0).text());
                            $(node).removeClass("text-warning").addClass("text-secondary");
                            num_node.html(number-1);
                            num_node.val("0");
                        }
                    });
                }
            }
            function closeTips() {
                $('.tips_wrapper').remove();
            }
            function getWebTipsByID(id) {

                $.ajax({
                    url:"/system/webTips/get/"+id,
                    type:"get",
                    data:{
                        id:$("#Web_Tips_Body").val(),
                    },
                    success:function(data){
                        console.log(data["webTips"]);
                        //console.log(data["webTips"].title);
                        $(".tips_wrapper").html('        <div class="tips_container">\n' +
                            '            <div class="rectangle mb-1">\n' +
                            '                <div class="notification-text">\n' +
                            '                    <i class="fa fa-bell mr-1"></i>\n' +
                            '                    <span class="border-4 mr-1 ml-1">&nbsp;'+data["webTips"].title+'</span>\n' +
                            '                    <span>&nbsp;&nbsp;'+data["webTips"].content+'</span>\n' +
                            '                </div>\n' +
                            '                <button onclick="closeTips();" class="btn btn-sm">\n' +
                            '                    <span class="fa fa-window-close text-light"></span>\n' +
                            '                </button>\n' +
                            '            </div>\n' +
                            '        </div>');
                        // $("#Web_Tips_Title").html(data["webTips"].title);
                        // //console.log(data["webTips"].content);
                        // $("#Web_Tips_Body").html(data["webTips"].content);
                    }
                })
            }
            (function (){
                getWebTipsByID(1);
            }());
        </script>
    </body>
</html>
